<template>
	<view>
		<view class='productList'>
			<view class='search bg-color acea-row row-between-wrapper'>
				<view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text>
					<input placeholder='搜索预约项目' placeholder-class='placeholder' confirm-type='search' name="search" :value='where.keyword'
					 @confirm="searchSubmit"></input>
				</view>
				<view class='iconfont' :class='is_switch==true?"icon-pailie":"icon-tupianpailie"' @click='Changswitch'></view>
			</view>
			<view class="h44"></view>

            <view class=" calc-h p-15 ">
				<view class="h180  box-shaow bg-fff p-l-15 p-t-15 p-r-15" v-for="(item,index) in yiyuan" :key="index">
					<view class="view flex-row  align-center b-b-1">
						<view class="view flex-row    p-b-15">
							<view class="w100 h100 b-r-5 m-r-15 b-r-15">
								<image :src="item.image" class="width100 height100"/>
							</view>

							<view class="flex-1">
								<view class="fz-18 bold c_333 m-b-10 line1">{{ item.name }}</view>

								<view class="c_333 fz-12 m-b-10" style="display:-webkit-box;
								-webkit-line-clamp:3;
								-webkit-box-orient:vertical;
								overflow:hidden;">
									{{ item.address + item.detailed_address}}/联系方式：{{ item.phone }}
								</view>

								<view class="view flex-row align-center justify-between width100">
									<view class="view flex-row align-center">
										<image src="../../static/images/pointer.png" class="w14 h14 m-r-5"/>
										<view class="c_333 fz-14">距离 {{item.disc }}km</view>
									</view>
									
									<button @click="yuyue(item)" type="primary" class="round-yuyue view align-center justify-center">开始预约</button>
								</view>

								
							</view>
							
						</view>
						
					</view>
					<view class="h35 width100 view flex-row align-center bg-fff">
						<view class="view flex-row align-center m-r-15">
							<image src="http://47.104.138.35//uploads/attach/2021/10/20211031/23d234344da0676d8a53ad518d90db04.png" class="w15 h15 m-r-5">
							<text>一对一问诊</text>
						</view>

						<view class="view flex-row align-center">
							<image src="http://47.104.138.35//uploads/attach/2021/10/20211031/23d234344da0676d8a53ad518d90db04.png" class="w15 h15 m-r-5">
							<text>专业认证机构</text>
						</view>
					</view>
				</view>
                
            </view>
			
		</view>
		<view class='noCommodity' v-if="yiyuan.length==0">
			<view class='pictrue'>
				<image src='http://47.104.138.35//uploads/attach/2021/11/20211107/e7f459cbb72c733d3f3b3efb024c544c.png'></image>
			</view>
			
		</view>

		<uni-popup :mask-click="false" ref="diaYuYue" type="center" background-color="#fff">
				<uni-popup-dialog  :title="`预约-${yiyua}`" :before-close="true"  @confirm="yuyueConfirm" @close="yuyueConfirmClose">
						<view class="w300 p-t-30 p-b-30">
							<view class="view flex-row align-center m-b-15">
								<view class="m-r-15 w80">姓名：</view>
								<uni-easyinput v-model="form.name" focus placeholder="请输入您的姓名" ></uni-easyinput>
							</view>
							<view class="view flex-row align-center m-b-15">
								<view class="m-r-15 w80">身份证号：</view>
								<uni-easyinput v-model="form.idcard" focus placeholder="请输入您的身份证" ></uni-easyinput>
							</view>
							
							<view class="view flex-row align-center m-b-15">
								<view class="m-r-15 w80">手机号：</view>
								<uni-easyinput v-model="form.mobile" focus placeholder="请输入您的手机号" type="number" ></uni-easyinput>
							</view>
							
							<view class="view flex-row align-center m-b-15">
								<view class="m-r-15 w80">性别：</view>
								<uni-data-checkbox v-model="form.sex" :localdata="sex"></uni-data-checkbox>
							</view>
							
							<view class="view flex-row align-center ">
								<view class="m-r-15 w80">预约时间：</view>
								<uni-datetime-picker type="datetime" v-model="form.yue_time" placeholder="请选择日期" @change="changeLog" />
							</view>
							
							<view class="view flex-row align-center m-t-30">
								<checkbox-group @change="getChange">
									<checkbox   class="fz-14">我已同意并确认<text style="font-size:14px;color:#2b7cf6;" @click.stop="toViewInfo">《用户知情协议》</text></checkbox>
								</checkbox-group>
							</view>

						</view>
				</uni-popup-dialog>
				
		</uni-popup>

		<tabBar :pagePath="'/pages/yuyue/index'"></tabBar>
	</view>
</template>

<script>
	import home from '@/components/home';
	import {
		getProductslist,
		getProductHot
	} from '@/api/store.js';
	import { getIndexData } from '@/api/api.js';
	import { postYuYue } from '@/api/order.js';
	
	import {mapGetters} from "vuex";
	import tabBar from "@/pages/index/components/tabBar.vue";
	import { goShopDetail } from '@/libs/order.js'
	const moment = require('@/libs/moment.min.js')
	export default {
		computed: mapGetters(['uid']),
		components: {
			home,
			tabBar
		},
		data() {
			return {
				yiyua: '',
				chek: false,
				form: {
					class_id: '',
					name: '',
					idcard: '',
					mobile: '',
					sex: 0,
					yue_time: ''
				},
				sex: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				productList: [],
				is_switch: true,
				lat: '',
				log: '',
				where: {
					sid: 0,
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					news: 0,
					page: 1,
					limit: 20,
					cid: 0,
				},
				price: 0,
				stock: 0,
				nows: false,
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				title: '',
				hostProduct: [],
				yiyuan: [],
				hotPage:1,
				hotLimit:10,
				hotScroll:false
			};
		},
		onLoad: function(options) {
			this.getWXLocation()
			
		},
		methods: {
			toViewInfo() {
				uni.navigateTo({
					url: '/pages/news_details/index?id=8'
				});
			},
			IsCard(str) {
					var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
					return reg.test(str);
			},
			IsPhone(str) {
				var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				return myreg.test(str)
			},
			getChange(e) {
				this.chek = e.detail.value
			},
			yuyueConfirm(value) {
				console.log(this.chek)
				if (!this.chek) {
					uni.showToast({
						title: '请确认并同意用户协议',
						icon:'none',
						duration: 2000
					});
					return false
				}
				if (Object.values(this.form).includes('')) {
					uni.showToast({
						title: '请检查填写完整预约信息，不许留空!',
						icon:'none',
						duration: 2000
					});
					return 
				}
				if (!this.IsCard(this.form.idcard)) {
					uni.showToast({
						title: '身份证填写错误！',
						icon:'none',
						duration: 2000
					});
					return
				}

				if (!this.IsPhone(this.form.mobile)) {
					uni.showToast({
						title: '手机号填写错误！',
						duration: 2000
					});
					return
				}
				let obj = {...this.form}
				obj.yue_time = moment(obj.yue_time).unix()
				postYuYue(obj).then(res => {
					
					if (res.code == 1) {
						uni.showToast({
							title: '预约成功！请到我的预约中查看预约信息。',
							duration: 2000
						});
						this.$refs.diaYuYue.close()
						this.getIndexData()
						uni.navigateTo({
							 url: '/pages/user/index'
						});
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}
					
				});
			},
			yuyueConfirmClose() {
				this.$refs.diaYuYue.close()
			},
			changeLog(e) {
				console.log('----change事件:', e);
			},
			yuyue(item) {
				this.yiyua = item.name
				this.form.class_id = item.id
				this.$refs.diaYuYue.open()
			},
			getWXLocation() {
				const that = this
				// #ifdef MP-WEIXIN
					uni.getSetting({
						success: res => {
						
						if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.userLocation')) { //scope.userInfo字段存在
							if (res.authSetting['scope.userLocation']) { //scope.userInfo:true为真
							wx.getLocation({
								type: 'gcj02',
								success(res) {
									that.lat = res.latitude;
									that.lon = res.longitude;
									let location = {
									lat: res.latitude,
									lon: res.longitude
									};
									uni.setStorageSync('location', location);
									// that._getNearParking2(res.latitude, res.longitude);
									that.getIndexData()
								},
								})
							} else { // scope.userInfo:false
							console.log("scope.userInfo:false");
							//打开授权设置
							wx.openSetting();
							}
						} else { //scope.userInfo字段不存在
							wx.getLocation({
							type: 'gcj02',
							success(res) {
								that.lat = res.latitude;
								that.lon = res.longitude;
								let location = {
								lat: res.latitude,
								lon: res.longitude
								};
								uni.setStorageSync('location', location);
								// that._getNearParking2(res.latitude, res.longitude);
								that.getIndexData()
							},
							})
						}
						},
					});
				// #endif
			},
			/**
			 * @creator 新猿意码
			 * @data 2019/01/17
			 * @desc 由经纬度计算两点之间的距离，la为latitude缩写，lo为longitude
			 * @param la1 第一个坐标点的纬度
			 * @param lo1 第一个坐标点的经度
			 * @param la2 第二个坐标点的纬度
			 * @param lo2 第二个坐标点的经度
			 * @return (int)s   返回距离(单位千米或公里)
			 * @tips 注意经度和纬度参数别传反了，一般经度为0~180、纬度为0~90
			 * 具体算法不做解释，有兴趣可以了解一下球面两点之间最短距离的计算方式
			 */
			distance: function (lat1, lng1, lat2, lng2) {
				// lat1用户的纬度
				// lng1用户的经度
				// lat2商家的纬度
				// lng2商家的经度
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toFixed(1) //保留两位小数
				console.log('经纬度计算的距离:' + s)
				return s
			},
			Rad(d) { 
				//根据经纬度判断距离
				return d * Math.PI / 180.0;
			},	
			_getNearParking2(latitude, longitude) {
				let that = this
				return that.distance(that.lat,that.lon,latitude, longitude);
			},
			getIndexData() {
				getIndexData().then(res => {
					const that = this
					let yiyuan = res.data.info.yiyuan.map( item => {
						let disc = that._getNearParking2(item.latitude, item.longitude) || ''
						item.disc = disc
						return item
					})
					this.yiyuan = yiyuan;
				});
			},
			// 去详情页
			godDetail(item){
				goShopDetail(item,this.uid).then(res=>{
					uni.navigateTo({
						url:`/pages/goods_details/index?id=${item.id}`
					})
				})
			},
			Changswitch: function() {
				let that = this;
				that.is_switch = !that.is_switch
			},
			searchSubmit: function(e) {
				let that = this;
				that.$set(that.where, 'keyword', e.detail.value);
				that.loadend = false;
				that.$set(that.where, 'page', 1)
				this.get_product_list(true);
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				if(that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.length<that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data)
					// that.$set(that, 'hostProduct', res.data)
				});
			},
			//点击事件处理
			set_where: function(e) {
				switch (e) {
					case 1:
						// #ifdef H5
						return history.back();
						// #endif
						// #ifndef H5
						return uni.navigateBack({
							delta: 1,
						})
						// #endif
						break;
					case 2:
						if (this.price == 0) this.price = 1;
						else if (this.price == 1) this.price = 2;
						else if (this.price == 2) this.price = 0;
						this.stock = 0;
						break;
					case 3:
						if (this.stock == 0) this.stock = 1;
						else if (this.stock == 1) this.stock = 2;
						else if (this.stock == 2) this.stock = 0;
						this.price = 0
						break;
					case 4:
						this.nows = !this.nows;
						break;
				}
				this.loadend = false;
				this.$set(this.where, 'page', 1);
				this.get_product_list(true);
			},
			//设置where条件
			setWhere: function() {
				if (this.price == 0) this.where.priceOrder = '';
				else if (this.price == 1) this.where.priceOrder = 'asc';
				else if (this.price == 2) this.where.priceOrder = 'desc';
				if (this.stock == 0) this.where.salesOrder = '';
				else if (this.stock == 1) this.where.salesOrder = 'asc';
				else if (this.stock == 2) this.where.salesOrder = 'desc';
				this.where.news = this.nows ? 1 : 0;
			},
			//查找产品
			get_product_list: function(isPage) {
				let that = this;
				that.setWhere();
				if (that.loadend) return;
				if (that.loading) return;
				if (isPage === true) that.$set(that, 'productList', []);
				that.loading = true;
				that.loadTitle = '';
				getProductslist(that.where).then(res => {
					let list = res.data;
					let productList = that.$util.SplitArray(list, that.productList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '已全部加载' : '加载更多';
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},
		},
		onPullDownRefresh() {

		},
		onReachBottom() {
			if(this.productList.length>0){
				this.get_product_list();
			}else{
				this.get_host_product();
			}

		}
	}
</script>

<style scoped lang="scss">
	.h180 {height: 390rpx;}
	.p-15 {padding: 30rpx;}
	.box-shaow {box-shadow: 0 3px 5px rgba(0,0,0,.1);border-radius: 5px;overflow: hidden;}
	.bg-fff {background-color: #fff;}
	.b-r-15 {border-radius: 30rpx;overflow: hidden;}
	.round-yuyue {
		width: 140rpx;
		height: 60rpx;
		font-size: 24rpx;
		border-radius: 30rpx;
		background-color: #c3a575;
	}
    .b-rd-1 {border:1px solid #ee672d; border-radius: 2px;}
    .b-gr-1 {border:1px solid #6bc69f;border-radius: 2px;}
    .calc-h {    height: calc(100vh - 80rpx);background-color: #eee;}
    .red {
        color: #ee672d;
    }
    .green {
        color: #6bc69f;
    }
    .bg-blue {background-color: #1d66f5;}
    .b-t-1 {border-top: 1px solid #eee;}
    .b-b-1 {border-bottom: 1px solid #eee;}
 
	.productList .search {
		width: 100%;
		height: 86rpx;
		padding-left: 23rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	.productList .search .input {
		width: 640rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.productList .search .input input {
		width: 548rpx;
		height: 100%;
		font-size: 26rpx;
	}

	.productList .search .input .placeholder {
		color: #999;
	}

	.productList .search .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.productList .search .icon-pailie,
	.productList .search .icon-tupianpailie {
		color: #fff;
		width: 62rpx;
		font-size: 40rpx;
		height: 86rpx;
		line-height: 86rpx;
	}

	.productList .nav {
		height: 86rpx;
		color: #454545;
		position: fixed;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;
		margin-top: 86rpx;
		top: 0;
		z-index: 9;
	}

	.productList .nav .item {
		width: 25%;
		text-align: center;
	}

	.productList .nav .item.font-color {
		font-weight: bold;
	}

	.productList .nav .item image {
		width: 15rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}

	.productList .list {
		padding: 0 20rpx;
		margin-top: 172rpx;
	}

	.productList .list.on {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 30rpx 0;
		margin: 0;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 345rpx;
	}

	.productList .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productList .list .item .text {
		padding: 20rpx 17rpx 26rpx 17rpx;
		font-size: 30rpx;
		color: #222;
	}

	.productList .list .item .text.on {
		width: 508rpx;
		padding: 0 0 0 22rpx;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}

	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}

	.productList .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}

	.noCommodity {
		background-color: #fff;
		padding-bottom: 30rpx;
	}
    .b-r-5 {border-radius: 5px;}
</style>
